<template>
	<view class="store">
		<!-- <StatusBar></StatusBar> -->
		
		<view class="store-head">
			
			<view class="store-head-cont flex f-a-center">
				<image class="store-head-cont-pic" :src="indexData.seller.logo_text" mode="aspectFit"></image>
				<view class="store-head-cont-info">
					<view class="store-head-cont-info-name">{{indexData.seller.shop_name}}的店</view>
					<view class="store-head-cont-info-seller">销量 {{indexData.seller.sales_num}}</view>
					<view class="store-head-cont-info-list">
						<!-- <image class="store-head-cont-info-list-notice" src="../../static/i-notice.png"></image> -->
						<swiper class="store-head-cont-info-list-swiper" autoplay interval='2000' circular vertical>
							
							<swiper-item v-for="(item, index) in indexData.advert" :key="index">
								<swiper-item>
									<view class="store-head-cont-info-list-swiper-text">{{item}}</view>
								</swiper-item>
							</swiper-item>
							
							<!-- <swiper-item>
								<view class="store-head-cont-info-list-swiper-text">测试</view>
							</swiper-item>
							<swiper-item>
								<view class="store-head-cont-info-list-swiper-text">测试1</view>
							</swiper-item> -->
						</swiper>
					</view>
					<view class="store-head-cont-info-code" @tap="showCode"><!-- <image src="../../static/qr-code.png"></image> --></view>
				</view>
			</view>
		</view>
		<image class="store-banner" :src="indexData.banner_url"></image>
		
		<view class="store-recommend" v-if="indexData.recommend.length>0">
			<view class="store-recommend-title">专属推荐</view>
			<!-- <scroll-view class="store-recommend-list">
				<view class="store-recommend-list-item">
					<image class="store-recommend-list-item-pic"></image>
					<view class="store-recommend-list-item-name">925纯银紫水晶手链</view>
					<view class="store-recommend-list-item-price">￥999.00</view>
					<view class="store-recommend-list-item-seller">已售5</view>
				</view>
			</scroll-view> -->
			<swiper class="store-recommend-slide" display-multiple-items="3">
				<swiper-item v-for="(item, index) in indexData.recommend" :key="index">
					<navigator open-type="navigate" hover-class="none" :url="'/pages/jewel/goods/show?goods_id='+item.goods_id" class="store-recommend-slide-item">
						<image class="store-recommend-slide-item-pic" :src="item.thumb" mode="aspectFit"></image>
						<view class="store-recommend-slide-item-name f-one-ellipsis">{{item.goods_name}}</view>
						<view class="store-recommend-slide-item-price">¥{{item.shop_price}}</view>
						<view class="store-recommend-slide-item-seller">已售{{item.sales_sum}}</view>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="store-goods">
			<view class="store-goods-nav flex f-a-center f-j-center">
				<view class="store-goods-nav-item flex f-a-center f-j-center" :class="{red:navIndex == 0}" @tap="navTap(0)">
					综合<arrow class="store-goods-nav-item-arrow" size="32" :color="navIndex == 0?'#f92a33':'#808080'" :direction="navData[0].dic"></arrow>
				</view>
				<view class="store-goods-nav-item flex f-a-center f-j-center" :class="{red:navIndex == 1}" @tap="navTap(1)" >
					销量<arrow class="store-goods-nav-item-arrow" size="32" :color="navIndex == 1?'#f92a33':'#808080'" :direction="navData[1].dic"></arrow>
				</view>
				<view class="store-goods-nav-item flex f-a-center f-j-center" :class="{red:navIndex == 2}" @tap="navTap(2)" >
					价格<arrow class="store-goods-nav-item-arrow" size="32" :color="navIndex == 2?'#f92a33':'#808080'" :direction="navData[2].dic"></arrow>
				</view>
			</view>
			<view class="store-goods-list">
				<navigator open-type="navigate" hover-class="none" :url="'/pages/jewel/goods/show?goods_id='+goods.goods_id" class="store-goods-list-item flex" v-for="(goods,index) in goodsList" :key="index">
					<image class="store-goods-list-item-pic" :src="goods.thumb"></image>
					<view class="store-goods-list-item-info">
						<view class="store-goods-list-item-info-name">{{goods.goods_name}}</view>
						<view class="store-goods-list-item-info-ename">{{goods.category}}</view>
						<view class="store-goods-list-item-info-price flex f-a-center">
							<view class="store-goods-list-item-info-price-num">¥{{goods.shop_price}}</view>
							<view class="store-goods-list-item-info-price-seller">已售{{goods.sales_sum}}</view>
						</view>
						<view class="store-goods-list-item-info-other">
							<text>{{goods.show_return_title}}</text>
						</view>
					</view>
				</navigator>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow"/>
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
			<view class="store-qrCode">
			    <image class="store-qrCode-userHeadPic" :src="indexData.seller.logo_text"></image>
			   <!-- <image class="store-qrCode-bg" src="../../static/qr_bg.png" mode="widthFix"></image> -->
			    <image class="store-qrCode-img" :src="storeCode"></image>
				<view @tap="showCode">
					<close size="40" color="#fff" class="store-qrCode-close"></close>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				indexData:{
					banner_url:'',
					seller:{},
					recommend:[],
					advert:[]
				},
				goodsList:[],
				navData:[
					{
						by:'id',
						order: 'desc',
						dic:'bottom'
					},
					{
						by:'sales_sum',
						order: 'desc',
						dic:'bottom'
					},
					{
						by:'b.shop_price',
						order: 'desc',
						dic:'bottom'
					}
				],
				seller_id: 0,	// 商家id
				postData:{},
				loadMoreStatus:1,
				page:1,
				total_pages:1,
				navIndex:0,
				storeCode:'',
				modeClass:['fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				}
			};
		},
		methods: {
			navTap(index){
				let that = this
				let dic = that.navData[index].dic
				let order = that.navData[index].order
				that.navData[index].dic = dic == 'bottom'?that.navData[index].dic = 'top':that.navData[index].dic = 'bottom',
				that.navData[index].order = order == 'desc'?that.navData[index].order = 'asc':that.navData[index].order = 'desc',
				that.navIndex = index
				that.page = 1
				that.goodsList = []
				that.getData()
			},
			getIndex(){
				let that = this
				jewel.get('business/seller_list',{seller_id: that.seller_id}, true, function(res){
					that.indexData.banner_url = res.data.banner_url
					that.indexData.seller = res.data.seller
					that.indexData.recommend = res.data.data
					that.indexData.advert = res.data.advert
				})
			},
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.total_pages == 0) that.total_pages = 1
				if(that.page <= that.total_pages){
					that.postData = {
						by: that.navData[that.navIndex].by,
						order: that.navData[that.navIndex].order,
						page: that.page,
						seller_id:that.seller_id
					}
					
					jewel.post('goods/searchGoods',that.postData,true,function(res){
						if(type == 'loadMore'){
							that.goodsList = that.goodsList.concat(res.data.data)
						}else{
							that.goodsList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages == 1?2:0
						}
						uni.stopPullDownRefresh()
					})
				}else{
					that.loadMoreStatus = that.total_pages == 1?5:2
				}
			},
			showCode(){
				let that = this
				that.transShow = !this.transShow
				if(that.transShow && !that.storeCode){
					uni.showLoading({
						title:'加载中...',
						mask:true
					})
					jewel.get('seller/myQrCode',{seller_id: that.seller_id},false,function(res){
						if(res.data.code == 0){
							uni.hideLoading()
							that.storeCode = res.data.data
						}
					})
				}
			}
		},
		onLoad(options) {
			let that = this
			that.seller_id = options.seller_id;
			that.getIndex()
			that.getData()
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData()
		}
	};
</script>

<style lang="scss" scoped>
	page{
		// background-color: #f5f5f5;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.store-head{
		background-color: #F0AD4E;
		padding: 0 24rpx;
		padding-top: var(--status-bar-height);
		&-searchInput{
			font-size: 28rpx;
			&-address{
				width: 147rpx;
				color: #FFFFFF;
				&-icon{
					width: 28rpx;
					height: 41rpx;
					margin-right: 10rpx;
				}
			}
			&-input{
				width: 555rpx;
				height: 62rpx;
				background-color: rgba($color: #ffffff, $alpha: 0.48);
				border-radius: 50px;
				color: #FFFFFF;
				&-icon{
					margin: 0 17rpx;
				}
				&-text{
					flex: 1;
					padding-right: 30rpx;
					color: #FFFFFF;
				}
			}
		}
		&-cont{
			padding: 20rpx 0;
			&-pic{
				width: 156rpx;
				height: 156rpx;
				border: 3rpx solid #FFFFFF;
				border-radius: 10rpx;
				margin-right: 16rpx;
				background-color: #FFFFFF;
			}
			&-info{
				flex: 1;
				position: relative;
				&-name{
					color: #FFFFFF;
					font-size: 40rpx;
					font-weight: bold;
				}
				&-seller{
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 5rpx 0 10rpx 0;
				}
				&-list{
					position: relative;
					&-swiper{
						background-color: rgba(7,92,24,0.5);
						height: 46rpx;
						line-height: 46rpx;
						color: #FFFFFF;
						border-radius: 50px;
						padding-right: 10rpx;
						padding-left: 56rpx;
					}
					&-notice{
						width: 28rpx;
						height: 31rpx;
						position: absolute;
						top: 50%;
						margin-top: -15rpx;
						left: 17rpx;
					}
				}
				&-code{
					position: absolute;
					right: 0;
					top: 0;
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
				// &-follow{
				// 	position: absolute;
				// 	right: 0;
				// 	top: 0;
				// 	width: 140rpx;
				// 	height: 50rpx;
				// 	border: 2rpx solid #FFFFFF;
				// 	border-radius: 50px;
				// 	text-align: center;
				// 	line-height: 50rpx;
				// 	color: #FFFFFF;
				// 	font-size: 33rpx;
				// 	image{
				// 		width: 32rpx;
				// 		height: 32rpx;
				// 		vertical-align: middle;
				// 		margin-top: -4rpx;
				// 		margin-right: 9rpx;
				// 	}
				// }
			}
		}
	}
	.store-banner{
		width: 702rpx;
		height: 244rpx;
		display: block;
		margin: 0 auto;
		border-radius: 10rpx;
		margin-top: 27rpx;
	}
	.store-recommend{
		&-title{
			font-size: 32rpx;
			color: #333333;
			padding-left: 32rpx;
			line-height: 68rpx;
		}
		&-slide{
			height: 320rpx;
			position: relative;
			&-item{
				background-color: #FFFFFF;
				margin-right: 10rpx;
				overflow: hidden;
				border-radius: 6rpx 6rpx 0 0;
				&-pic{
					height: 160rpx;
					width: 240rpx;
					display: block;
				}
				&-name{
					color: #353535;
					font-size: 28rpx;
					margin: 16rpx 0;
					padding: 0 10rpx;
				}
				&-price{
					color: #f82a33;
					font-size: 32rpx;
					padding: 0 10rpx;
				}
				&-seller{
					color: #808080;
					font-size: 22rpx;
					padding: 10rpx{
						top: 0;
					};
				}
			}
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height: 312rpx;
				background-color: #f1f1f1;
				left: 0;
				top: 8rpx;
				z-index: -1;
			}
		}
	}
	.store-goods{
		&-nav{
			height: 78rpx;
			border-bottom: 1px solid #f7f7f7;
			&-item{
				flex: 1;
				height: 78rpx;
				color: #333333;
				font-size: 28rpx;
				&-arrow{
					margin-left: 5rpx;
				}
			}
		}
		&-list{
			background-color: #f1f1f1;
			padding-bottom: 1rpx;
			&-item{
				background-color: #FFFFFF;
				margin-bottom: 12rpx;
				padding: 20rpx 30rpx;
				&-pic{
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				&-info{
					flex: 1;
					&-name{
						color: #353535;
						font-size: 34rpx;
					}
					&-ename{
						color: #7f7f7f;
						font-size: 26rpx;
					}
					&-price{
						justify-content: space-between;
						margin-top: 3rpx;
						margin-bottom: 7rpx;
						&-num{
							color: #f92a33;
							font-size: 36rpx;
						}
						&-seller{
							color: #808080;
							font-size: 22rpx;
						}
					}
					&-other{
						text{
							color: #ff4a68;
							font-size: 20rpx;
							border: 1px solid #ffdee4;
							line-height: 25rpx;
							border-radius: 5rpx;
							padding: 0 5rpx;
						}
					}
				}
			}
		}
	}
	.red{
		color: #f92a33;
	}
	.store-qrCode{
		width: 602rpx;
		height: 673rpx;
		position: relative;
		z-index: 1;
		&-userHeadPic{
			width: 150rpx;
			height: 150rpx;
			display: block;
			margin: 5rpx auto;
			border-radius: 50%;
		}
		&-bg{
			width: 602rpx;
			height: 673rpx;
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
		}
		&-img{
			width: 320rpx;
			height: 320rpx;
			margin: 0 auto{
				top: 100rpx;
			};
			display: block;
		}
		&-close{
			position: absolute;
			bottom: -100rpx;
			border-radius: 50%;
			border: 3px solid #FFFFFF;
			padding: 5rpx;
			left: 50%;
			margin-left: -30rpx;
		}
	}
	
</style>
